<template>
  <div class="home">
    <div class="check-box">
      <el-checkbox-group v-model="checkList">
         <el-checkbox
          v-for="item in citys"
          :key="item.label"
          :label="item.label"
        >{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <make-info :citys="checkList" :students="students" @event-handle-cancel="getType"></make-info>
    <el-button @click="deleteStudents">减少students</el-button>
    <el-button @click="addStudents">增加students</el-button>
    <!-- <ul class="heros">
      <li class="hero-item" v-for="item in getHeros" :key="item.name">
        <span>{{`${item.name}--${item.skill}`}}</span>
      </li>
    </ul> -->
  </div>
</template>

<script lang="ts">
import {mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { Component, Vue } from 'vue-property-decorator';
import makeInfo from './components/makeInfo.vue';

@Component({
  components: {
    makeInfo,
  },
  computed: mapGetters(['getHeros']),
  methods: {
    ...mapMutations({
    SET_HEROS: 'SET_HEROS',
  }),
  }
})
export default class Home extends Vue {
  $refs!: {
    [propName: string]: any,
  }
  [x: string]: any,
  checkList: any[] = ['guangzhou', 'shenzhen']
  citys: any[] = [
    {name: '上海', label: 'shanghai'},
    {name: '北京', label: 'beijing'},
    {name: '广州', label: 'guangzhou'},
    {name: '深圳', label: 'shenzhen'},
  ]
  students: any[] = [
    {name: '张生', age: 20 },
    {name: '王伦', age: 22 },
    {name: '徐斌', age: 23 },
  ]
  deleteStudents(){
    this.students.pop();
  }
  addStudents(){
    this.students.push({
      name: '李四', age: 30,
    });
  }
  getType(val: any){
    this.$notify({
      title: '这是子组件传过来的type',
      message: JSON.stringify(val),
      type: 'success'
    });
  }
  created() {
    // this.$store.commit('SET_HEROS', {
    //   val: [
    //     {
    //       name: '貂蝉',
    //       skill: '乱世一舞'
    //     },
    //     {
    //       name: '凯皇',
    //       skill: '暴力一刀',
    //     }
    //   ],
    // });
    console.log(process.env.NODE_ENV, 'process.env.NODE_ENV');
    this.SET_HEROS({
      val: [
        {
          name: '妲己',
          skill: '魅力心心',
        },
        {
          name: '王昭君',
          skill: '冰冻三尺',
        },
        {
          name: '吕布',
          skill: '方天画戟',
        }
      ]
    });
  }
}
</script>
<style lang="less" scoped>
  .check-box{
    margin: 20px auto;
    width: 400px;
  }
</style>
